import {Space, Table ,message,Popconfirm} from 'antd';
import React, { useEffect, useState } from 'react';
import "./../../assets/css/cusHighSeas/common.css";
import { inject, observer } from 'mobx-react';


const CustomerSeasM = (props) => { 
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'customer_name',
    },
    {
      title: '联系人',
      dataIndex: 'contact_name',
      render: (text) => <a className='renderA' href='/'>{text}</a>,
    },
    {
      title: '手机号码',
      dataIndex: 'phone_number',
    },
    {
      title: '客户来源',
      dataIndex: 'customer_source',
    },
    {
      title: '录入时间',
      dataIndex: 'entry_time',
    },
    {
      title: '最后更新',
      dataIndex: 'last_update',
    },
    {
      title: '申请人',
      dataIndex: 'user_id',
    },
    {
      title: '申请时间',
      dataIndex: 'apply_time',
    },
    {
      title: '管理',
      key: 'action',
      // text即为table的所有data； record为table当前行数据
      render: (text,record) => (
        <Space size="middle"  style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
          <button className={text.btn_status === 1 ? "BtnPass show" : "BtnPass"} onClick={() => applyPass(record)}>通过审核</button>
          <button className={text.btn_status===1?"BtnNo show":"BtnNo" } onClick={()=>refuse(record)}>拒绝审核</button>
          <button className={text.btn_status===1?"BtnApply none":"BtnApply"} onClick={()=>apply(record)}>申请</button>
          <button className='BtnUpdate'>修改</button>
          <button  className='BtnDel' onClick={() => deleteList(record)} >
            <Popconfirm title="是否删除" okText="删除" cancelText="取消" onConfirm={confirm}>删除</Popconfirm>
          </button>
        </Space>
      ),
    }
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      props.cushighseaStore.selectedRowKeys=selectedRowKeys
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows:', selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  const[cHSdata,setCHSdata]=useState([
    {key:1,customer_id: 1, customer_name: '大明', contact_name: '李四',phone_number:'66666666',customer_source:'电话营销',entry_time:'2022-6-6',btn_status:0,
        last_update: '1天前', user_id: null, apply_time: null
    },
    {key:2,customer_id: 2, customer_name: '大明明', contact_name: '李四',phone_number:'66666666',customer_source:'搜索引擎',entry_time:'2022-6-6',btn_status:0,
        last_update: '1天前', user_id: null, apply_time: null
    },
    {key:3,customer_id: 3, customer_name: '小明', contact_name: '哈哈哈',phone_number:'66666666',customer_source:'电话营销',entry_time:'2022-6-6',btn_status:0,
        last_update: '1天前', user_id: null, apply_time: null
    },
    {key:4,customer_id: 4, customer_name: '张三', contact_name: '王五',phone_number:'66666666',customer_source:'朋友介绍',entry_time:'2022-6-6',btn_status:0,
        last_update: '1天前', user_id: null, apply_time: null
    },
    {key:5,customer_id: 5, customer_name: '王多多', contact_name: '王多鱼',phone_number:'66666666',customer_source:'电话营销',entry_time:'2022-6-6',btn_status:0,
        last_update: '1天前', user_id: null, apply_time: null
    },
    {key:6,customer_id:6, customer_name: '二喜', contact_name: '小王',phone_number:'66666666',customer_source:'电话营销',entry_time:'2022-6-6',btn_status:1,
    last_update: '1天前', user_id: '张三', apply_time: '2022-8-8'
    },
    {key:7,customer_id: 7, customer_name: '小鱼', contact_name: '李四',phone_number:'66666666',customer_source:'搜索引擎',entry_time:'2022-6-6',btn_status:1,
        last_update: '1天前', user_id: '张三', apply_time: '2022-8-8'
    },
    {key:8,customer_id: 8, customer_name: '哈哈', contact_name: '老王',phone_number:'66666666',customer_source:'电话营销',entry_time:'2022-6-6',btn_status:1,
        last_update: '1天前', user_id: 'admin', apply_time: '2022-8-8'
    }
  ])
  //删除
  const deleteList = (record) => { 
    let id = record.customer_id;
    console.log('id', id);
    props.cushighseaStore.delListData({customer_id: id }).then(() => {
      props.cushighseaStore.getCusHighSeaMData({currentPage: 1, pageSize: 20})
    })
  }
   //删除message提示
  const [visible, setVisible] = useState(false);
  const confirm = () => {
    setVisible(false);
    message.success('删除成功');
  };
  //获取自定义属性节点法1
  // const GetElement=(tagid, attr, val,currentele) =>{
  //   let e = document.getElementById(tagid);
  //   let a = e.getElementsByClassName("ant-table-row")
  //   for (let i = 0; i < a.length; i++) {
  //     if (a[i].getAttribute(attr) == val) {
  //       let currentDom=a[i].querySelector(currentele)
  //       return currentDom;
  //     }
  //   }
  // }
  // const GetElement2 = (val,currentele) => { 
  //   document.querySelector(`div[data-row-key=${val}]`).querySelector(currentele)
  // }
  //点击申请方法
  const apply=(record)=>{
    let id = record.customer_id
    setCHSdata((prev) => prev.map((el => el.customer_id===id?{...el,btn_status:1}:el))) //修改数组对象的值
    console.log('申请Btn', id)
    }
    // props.cushighseaStore.applyData({customer_id:id,btn_status:'1'})
    // .then(props.cushighseaStore.getCusHighSeaMData({currentPage: props.cushighseaStore.currentPage, pageSize: props.cushighseaStore.pageSize}))
 
  
  //拒绝审核
  const refuse = (record) => { 
    let id = record.customer_id
    setCHSdata((prev) => prev.map((el => el.customer_id===id?{...el,btn_status:0}:el))) //修改数组对象的值
    console.log('拒绝Btn', id)
    // props.cushighseaStore.applyData({ customer_id: id, btn_status: '0' })
    //   .then(props.cushighseaStore.getCusHighSeaMData({currentPage: props.cushighseaStore.currentPage, pageSize: props.cushighseaStore.pageSize}))
  }
  //通过单个审核
  const applyPass = (record) => { 
    let id = record.customer_id
    props.cushighseaStore.applyPassData({ user_id: 'admin', customer_id: id })
  }

  // useEffect(() => {
  //   props.cushighseaStore.getCusHighSeaMData({ currentPage: props.cushighseaStore.currentPage, pageSize: props.cushighseaStore.pageSize })
  //   console.log('CHSM');
  // }, [props.cushighseaStore.currentPage,props.cushighseaStore.pageSize]);
  return(
    <div>
      <Table className='CHStable' id='CHSManage'
        rowSelection={{
          ...rowSelection,
        }}
        columns={columns}
        dataSource={cHSdata}
        pagination={false}
      >
      </Table>
      
    </div>
  )
};


export default inject('cushighseaStore')(observer(CustomerSeasM))